<template>
	<el-form ref="form" :model="courseForm" :rules="courseRules" label-width="80px" class="course_base_info">
		<div class="cover">
			<sw-image-uploader v-model="courseForm.fileId" clip ratio="16:9" size="320"></sw-image-uploader>
		</div>
		<div class="info">
			<el-form-item label="课程名称" prop="title">
				<el-input v-model="courseForm.title" placeholder="请输入课程名称"></el-input>
			</el-form-item>
			<el-form-item label="课程编码" prop="code">
				<el-input v-model="courseForm.code" placeholder="请输入课程编码"></el-input>
			</el-form-item>
			<el-form-item label="课程来源" prop="extFiled2">
				<el-input v-model="courseForm.extFiled2" placeholder="请输入课程来源"></el-input>
			</el-form-item>
			<el-form-item label="课程分类" prop="labelValue">
				<el-select v-model="courseForm.labelValue" multiple placeholder="请选择课程分类">
					<el-option v-for="(item, index) in courseLabel" :key="index" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="总学时" prop="sumHours">
				<el-input-number v-model="courseForm.sumHours" controls-position="right" :min="1" />
				<span class="unit">小时</span>
			</el-form-item>
		</div>
		<el-form-item label="课程简介">
			<el-input v-model="courseForm.content" type="textarea" :autosize="{ minRows: 6 }" placeholder="请输入课程简介" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="handleSaveCourseInfo()">保存</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
import { mapGetters } from 'vuex';
import { courseDetail, updateCourse } from '@/api/course/sysCourse';
export default {
	beforeRouteEnter(to, from, next) {
		to.meta['hasBack'] = true;
		next();
	},
	data() {
		return {
			courseForm: {},
			courseRules: {
				title: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
				extFiled2: [{ required: true, message: '请输入课程来源', trigger: 'blur' }],
				labelValue: [{ required: true, message: '请选择资源分类', trigger: 'change' }],
				sumHours: [{ required: true, message: '请输入学习时长', trigger: 'blur' }]
			}
		};
	},
	computed: {
		...mapGetters(['courseLabel']),
		courseId() {
			return this.$route.params.id;
		}
	},
	mounted() {
		this.getCourseDetail();
	},
	methods: {
		async getCourseDetail() {
			let result = await courseDetail(this.courseId).then((res) => res.data);
			if (result.code === '0') {
				let datas = this.$detailData(result.data);
				this.courseTime = [datas.startTime, datas.endTime];
				this.courseForm = { ...datas, labelValue: datas.labelValue.split(',') };
			}
		},

		handleSaveCourseInfo() {
			this.$refs['form'].validate((valid) => {
				if (!valid) return false;
				this.saveCourseInfoRequest(this.courseForm);
			});
		},

		//保存课程信息请求
		async saveCourseInfoRequest(data) {
			let params = { ...data, labelValue: data.labelValue.join() };
			let result = await updateCourse(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('保存成功');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.course_base_info {
	overflow: auto;
	padding: 32px 32px 10px;
	.cover {
		float: right;
	}
	.info {
		margin-right: 360px;
		overflow: hidden;
	}
}
</style>
